<script>
export default {
  name: "xrkDialog",
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    title: {
      type: String,
    },
    iconSrc: {
      type: String,
    },
    maxheight: {
      type: Number,
      default: 0.95,
    },
    width: {
      type: String,
      default: "95%",
    },
    customClass: {
      type: String,
    },
    vertical: {
      type: String,
      default: "center",
    },
    lock: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visibleDialog: false,
      dialogShow: false,
      scrollTop: 0,
      dialogHeight: "",
    };
  },
  watch: {
    visible: {
      handler: function (newValue) {
        if (newValue) {
          // 禁用滚动条
          const scrollTop =
            document.body.scrollTop || document.documentElement.scrollTop;
          this.scrollTop = scrollTop;
          document.querySelector("body").style.cssText =
            "overflow-y:hidden;position:fixed;width:100%;top:" +
            -this.scrollTop +
            "px";
          this.visibleDialog = newValue;
        } else {
          //启用滚动条
          document.querySelector("body").style.cssText =
            "overflow-y:auto;position:static;top:auto";
          document.body.scollTop = this.scrollTop;
          document.documentElement.scrollTop = this.scrollTop;
        }
        this.$nextTick(function () {
          setTimeout(
            function () {
              this.dialogShow = newValue;
            }.bind(this)
          );
        });
      },
      immediate: true,
    },
  },
  render(h) {
    if (!this.visibleDialog) return;
    const _self = this;
    return h(
      "div",
      {
        class: {
          dialog_wrapper: true,
          dialog_wrapper_show: this.dialogShow,
          [this.vertical]: true,
        },
        on: {
          click: function (e) {
            if (_self.lock) return;
            if (e.target.classList.contains("dialog_wrapper")) {
              _self.$emit("close");
            }
          },
        },
      },
      [
        h(
          "div",
          {
            class: {
              "el-dialog": true,
              "upspring-dialog": this.dialogShow,
              [this.customClass]: this.customClass,
            },
            ref: "dialog",
            on: {
              transitionend: function () {
                if (_self.dialogShow === false) {
                  _self.visibleDialog = false;
                }
              },
            },
            style: {
              width: this.width,
              // 为了兼容低版本安卓!!!
              height: this.dialogHeight || "auto",
            },
          },
          [
            h(
              "div",
              {
                class: {
                  "el-dialog-heade": true,
                },
                style: {
                  display: this.title ? "block" : "none",
                },
              },
              [
                h("span", {}, [this.title]),
                h(
                  "div",
                  {
                    class: {
                      "el-icon": true,
                    },
                    on: {
                      click: function () {
                        _self.$emit("close");
                      },
                    },
                  },
                  [
                    h("img", {
                      domProps: {
                        src: this.iconSrc || "",
                      },
                      style: {
                        width: "20px",
                        height: "20px",
                        display: this.iconSrc ? "block" : "none",
                      },
                    }),
                  ]
                ),
              ]
            ),
            h(
              "div",
              {
                class: {
                  "el-dialog-body": true,
                },
              },
              [this.$slots.default]
            ),
          ]
        ),
      ]
    );
  },
  methods: {
    fetchStyleHeigth(dom) {
      const dialogH = dom.offsetHeight;
      const viewsH = window.innerHeight;
      const assert = viewsH * this.maxheight >= dialogH;
      if (!assert) {
        return Math.floor(viewsH * this.maxheight) + "px";
      } else {
        return "auto";
      }
    },
  },
  beforeUpdate() {
    if (!this.dialogHeight) {
      this.dialogHeight =
        this.$refs.dialog && this.fetchStyleHeigth(this.$refs.dialog);
    }
  },
};
</script>
<style lang="scss" scoped>
.dialog_wrapper {
  &.dialog_wrapper_show {
    background-color: rgba(0, 0, 0, 0.7);
  }

  &.center {
    .el-dialog {
      top: 100%;
    }

    .upspring-dialog {
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
    }
  }

  &.bottom {
    .el-dialog {
      bottom: -100%;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    .upspring-dialog {
      bottom: 0%;
      // transform: translate3d(-50%, 50%, 0);
    }
  }

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 999;
  transition: all 0.4s;
  background-color: rgba(255, 255, 255, 0);

  .el-dialog {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 50%;
    transform: translateX(-50%);
    overflow-y: hidden;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background-color: #fff;
    transition: all 0.4s;
  }

  .el-dialog-heade {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f2f2f2;

    .el-icon {
      position: absolute;
      right: 15px;
      top: 10px;
    }

    span {
      font-size: 16px;
      font-weight: 700;
      color: #222222;
    }

    img {
      vertical-align: middle;
    }
  }

  .el-dialog-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
  }
}
</style>